<!-- Copyright 2015 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">

<link rel="import" href="../../cr_ui.html">
<link rel="import" href="../../login_ui_tools.html">
<link rel="import" href="../../components/display_manager_types.html">
<link rel="import" href="../../components/oobe_icons.html">
<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/multi_step_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="../../components/buttons/oobe_next_button.html">
<link rel="import" href="../../components/buttons/oobe_text_button.html">
<link rel="import" href="../../components/common_styles/common_styles.html">
<link rel="import" href="../../components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../../components/dialogs/oobe_adaptive_dialog.html">
<link rel="import" href="../../components/dialogs/oobe_loading_dialog.html">
<link rel="import" href="../../components/dialogs/oobe_modal_dialog.html">

<!--
  SAML password confirmation UI for the Gaia flow.
  Contains two cards:
    1. Password input form.
    2. Spinner with notice "Please wait";
-->
<dom-module id="saml-confirm-password-element">
  <template>
    <style include="oobe-dialog-host-styles">
    </style>
    <style include="cr-shared-style">
      #cancelConfirmDlg {
        --oobe-modal-dialog-content-slot-padding-bottom: 0;
        --oobe-modal-dialog-title-slot-padding-bottom: 0;
        --oobe-modal-dialog-width: 384px;
      }

      #title {
        overflow-wrap: break-word;
      }

      .cancel-button {
        margin-inline-end: 0;
        margin-inline-start: 8px;
      }
    </style>
    <oobe-adaptive-dialog role="dialog" for-step="password">
      <iron-icon slot="icon" icon="oobe-32:lock"></iron-icon>
      <h1 id="title" slot="title">[[email]]</h1>
      <p id="subtitle" slot="subtitle">
        [[subtitleText_(locale, isManualInput)]]
      </p>
      <div slot="content" class="landscape-vertical-centered">
        <cr-input type="password" id="passwordInput" required
            class="focus-on-show"
            placeholder="[[passwordPlaceholder_(locale, isManualInput)]]"
            error-message="[[passwordErrorText_(locale, isManualInput)]]">
        </cr-input>
        <cr-input type="password" id="confirmPasswordInput" required
            hidden="[[!isManualInput]]"
            placeholder="[[i18nDynamic(locale, 'confirmPasswordLabel')]]"
            error-message="[[i18nDynamic(locale, 'manualPasswordMismatch')]]">
        </cr-input>
      </div>
      <div slot="bottom-buttons">
        <oobe-text-button id="cancel" on-click="onCancel_" text-key="cancel"
            border>
        </oobe-text-button>
        <oobe-next-button id="next" on-click="submit_" inverse
            text-key="nextButtonText">
        </oobe-next-button>
      </div>
    </oobe-adaptive-dialog>
    <oobe-loading-dialog id="progress" role="dialog" for-step="progress"
        title-key="gaiaLoading">
      <iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
    </oobe-loading-dialog>

    <oobe-modal-dialog id="cancelConfirmDlg">
      <div slot="title">
        [[i18nDynamic(locale, 'accountSetupCancelDialogTitle')]]
      </div>
      <div slot="buttons">
        <cr-button class="action-button" on-click="onCancelNo_">
          [[i18nDynamic(locale, 'accountSetupCancelDialogNo')]]
        </cr-button>
        <cr-button class="cancel-button" on-click="onCancelYes_">
          [[i18nDynamic(locale, 'accountSetupCancelDialogYes')]]
        </cr-button>
      </div>
    </oobe-modal-dialog>

  </template>
  <script src="saml_confirm_password.js"></script>
</dom-module>
